<template>
  <div id="home">
    <NavBar @change-background="updateBackgroundImage" />
    <BackgroundImageRotator :images="images" :currentIndex="currentImageIndex" @view-details="handleViewDetails"
      @update-index="updateBackgroundImage" />

    <!-- 选项切换区域 -->
    <div class="category-tabs">
      <div v-for="(category, index) in categories" :key="index"
        :class="['category-item', { active: selectedCategory === category }]" @click="selectedCategory = category">
        {{ category }}
      </div>
    </div>

    <!-- 商品展示区域 -->
    <div class="recommended-section">
      <h2 class="recommended-title">❤️ {{ selectedCategory }}</h2>
      <div class="recommended-products">
        <div v-for="product in filteredProducts" :key="product.id" class="product-card">
          <img :src="product.image" :alt="product.name" class="product-image" />
          <p class="product-name">{{ product.name }}</p>
          <p class="product-price">￥{{ product.price }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import NavBar from '../components/NavBar.vue';
import BackgroundImageRotator from '../components/BackgroundImageRotator.vue';
import { useRouter } from 'vue-router'; // 引入 useRouter 钩子
// 定义图片，静态引入图片
import image1 from '@/assets/images/image1.png';
import clothe1 from '@/assets/clothes/clothe1.png';
import clothe2 from '@/assets/clothes/clothe2.png';
import clothe3 from '@/assets/clothes/clothe3.png';
import clothe4 from '@/assets/clothes/clothe4.png';
import clothe5 from '@/assets/clothes/clothe5.png';
import watch from '@/assets/Electronic/1.jpg';
import phone1 from '@/assets/Electronic/2.jpg';
import phone2 from '@/assets/Electronic/3.jpg';
import eating1 from '@/assets/eating/1.jpg';
import eating2 from '@/assets/eating/2.jpg';
import stationery1 from '@/assets/stationery/stationery1.jpg';
import stationery2 from '@/assets/stationery/stationery2.jpg';

// 定义图片数组
const images = ref([image1]);

// 当前图片索引
const currentImageIndex = ref(0);
const router = useRouter(); // 获取路由实例
// 处理查看详情按钮点击事件
const handleViewDetails = () => {
  
  router.push({ name: 'userLogin' });
};

// 更新背景图片索引
const updateBackgroundImage = (newIndex) => {
  currentImageIndex.value = newIndex;
};

// 选项分类
const categories = ref(['Guess you like', 'Greedy snacks', 'Fashion Clothing', 'Electronic Product', 'Office Stationery']);
const selectedCategory = ref('Guess you like');

// 商品数据（示例数据）
const products = ref([
  { id: 1, name: 'F426 official authentic store China-Chic brand early spring loose casual sweater coat Zhang Ruonan', category: 'Fashion Clothing', price: 99.99, image: clothe4 },
  { id: 2, name: 'New Denning Leads, New Street Leader\'s Attitude Immediately Locked in MLB New Denning, Endorsed by Yu Shuxin', category: 'Fashion Clothing', price: 521.99, image: clothe3 },
  { id: 3, name: 'Camel assault suit Angelababy brand endorsement', category: 'Fashion Clothing', price: 399.99, image: clothe2 },
  { id: 4, name: 'EVISU 2025 Spring Men\'s Wear Wang Yibo endorses new denim outfit design', category: 'Fashion Clothing', price: 499.99, image: clothe1 },
  { id: 5, name: 'Bai Jingting, Sang Yan, same style stand up collar jacket, men\'s spring American pilot coach jacket, baseball jacket, trendy black', category: 'Fashion Clothing', price: 299, image: clothe5 },
  { id: 6, name: 'MAX-G sports electronic watch for boys, middle and high school students, night light waterproof multifunctional digital youth watch', category: 'Electronic Product', price: 59.9, image: watch },
  { id: 7, name: 'Xiaomi Redmi 14C Xiaomi Redmi Phone 5160mAh High Battery 6.88-inch Large Screen 13 Million HD Main Camera Glacier Silver 4GB+64GB', category: 'Electronic Product', price: 4999, image: phone1 },
  { id: 8, name: 'Apple iPhone 16 Pro Max (A3297) 256GB white titanium metal supports Mobile, Unicom, Telecom 5G dual card dual standby phone', category: 'Electronic Product', price: 10499, image: phone2 },
  { id: 9, name: 'Spicy Prince Authentic Spicy Bar Micro Spicy 418g Leisure Snack Gift Pack Independent Small Package Party Outing Internet Celebrity Snack', category: 'Greedy snacks', price: 9.9, image: eating1 },
  { id: 10, name: 'Lay\'s Potato Chips Mixed Multi Flavor 40g*10 Pack 400g Snack Gift Pack Pepsi Food', category: 'Greedy snacks', price: 15.5, image: eating2 },
  { id: 11, name: 'SHEN SHI A5 Business Notebook Magnetic Buckle Notebook Office Student Stationery Diary', category: 'Office Stationery', price: 9.9, image: stationery1 },
  { id: 12, name: '(M&G) Exam Kit for Top Scoring Candidates, Essential Stationery for Middle and High School Entrance Examinations, 2B Pencil for Card Application', category: 'Office Stationery', price: 6.7, image: stationery2 },
]);

// 根据选中的分类筛选商品
const filteredProducts = computed(() => {
  return products.value.filter(product => product.category === selectedCategory.value || selectedCategory.value === 'Guess you like');
});
</script>

<style>
/* 全局样式 */
body,
#home {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  overflow: hidden;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#home {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
}

/* 选项切换区域 */
.category-tabs {
  display: flex;
  justify-content: center;
  gap: 50px;
  padding: 15px 0;
  background-color: #fff;
  border-bottom: 2px solid #eee;
}

.category-item {
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 1em;
  background-color: #f8f8f8;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.category-item:hover,
.category-item.active {
  background-color: orange;
  color: white;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* 推荐商品区域 */
.recommended-section {
  padding: 10px;
  background-color: #fff;
}

.recommended-title {
  font-size: 1em;
  margin-bottom: 5px;
  color: orange;
  display: flex;
  align-items: center;
}

.recommended-products {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* 5列布局 */
  gap: 20px;
  justify-content: center;
}

.product-card {
  width: 200px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  background-color: #fff;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-card:hover {
  transform: scale(1.05);
}

.product-image {
  width: 100%;
  height: 260px;
  border-radius: 4px;
}

.product-name {
  font-size: 1.1em;
  font-weight: bold;
  margin: 5px 0;
  letter-spacing: 0.5px;
  /* 增加间距 */
  color: #333;
}

.product-price {
  font-size: 1.2em;
  color: #e91e63;
  font-weight: bold;
  margin-top: auto;
}
</style>
